<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화  
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","400px");
		
		var cfg = {SearchMode:smLazyLoad,Page:30,MergeSheet:msHeaderOnly};
		
		var headers = [ {Text:"No|개봉일|영화명|영문제목|감독|주연배우|등급", Align:"Center"} ];
		var info = {Sort:1,ColMove:1,ColResize:1,HeaderCheck:0};
		var cols = [
			{Type:"Seq",Width:45,SaveName:"SEQ",Align:"center"},
			{Type:"Date",Width:85,SaveName:"OPEN_DATE",Format:"Ymd",Align:"Center"},
			{Type:"Text",Width:180,SaveName:"MOVIE_NM"},
			{Type:"Text",Width:150,SaveName:"ENG_NM"},
			{Type:"Text",Width:120,SaveName:"DIRECTOR"},
			{Type:"Text",Width:150,SaveName:"ACTOR", MultiLineText:1},
			{Type:"Combo",Width:50,SaveName:"FILM_RATE",Align:"Center",ComboText:"12세|15세|18세|전체|청불",ComboCode:"01|02|03|04|05"}
		];
		
		mySheet.SetConfig(cfg);
		mySheet.InitHeaders(headers,info);
		mySheet.InitColumns(cols);

		mySheet.SetCountPosition(4);
		mySheet.FitColWidth();
	});
	
	/*Sheet 각종 처리*/
	function doAction(sAction) {
		
		switch(sAction) {
			case "search":		//조회
				mySheet.DoSearch("../data/MOVIE01.json");
				break;
		}
	}
	
	function mySheet_OnSearchEnd() {
		mySheet.FitColWidth();
	}
</script>
<title>LazyLoad 조회 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/sheetNavi.jsp" %>	
	<div id="title">LazyLoad 조회 예제</div>
	<div id="desc">
		스크롤에 해당하는 데이터를 순간순간 PC에서 읽어와 화면에 로딩한다.<br>
		<br>
		// LazyLoad 모드 설정<br>
		var cfg = {SearchMode:smLazyLoad, Page:10};<br>
		mySheet.SetConfig(cfg);<br>
	</div>

	<div id="functionArea">
		<input type="button" value="조회하기" onclick="doAction('search')">
	</div>
	
	<div id="viewArea">
	</div>
</div>
</body>
</html>